<template>
    <rx-dialog @ok="onOk" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div class="range">
                    <div class="table-operator">
                        <rx-icon-show icon="icon-lineVue3_add" @click="addRow"/>
                        <rx-icon-show icon="icon-lineVue3_delete" @click="removeRow"/>
                    </div>
                    <rx-grid
                        ref="table"
                        :data="settings"
                        :columns="columns"
                        field="idx_"
                        @selectMethod="selectChange"
                        :selectConfig="{type:'checkbox',width: '60',trigger: 'row',checkMethod:'' }"
                    >
                        <template #labelSlot="{row}">
                            <a-input v-model:value="row.label"></a-input>
                        </template>
                        <template #maxSlot="{row}">
                            <a-input-number v-model:value="row.max"></a-input-number>
                        </template>
                    </rx-grid>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>

import {RxGrid, Util,RxDialog,RxLayout,GridMixin} from '@lowcode/jpaas-base-lib';

export default {
    name: "indicator-max",
    props: ["destroy","fieldSetting"],
    mixins:[GridMixin],
    components: {
        RxGrid,
        RxDialog,
        RxLayout
    },
    data() {
        return {
            settings: [],
            columns: [
                {title: this.i18n('label','标签'), field: 'label', slots: {default: 'labelSlot'}},
                {title: this.i18n('maxValue','最大值'), field: 'max',slots: {default: 'maxSlot'}}
            ],
            selectRows:[]
        }
    },
    computed: {
        table() {
            return this.$refs.table;
        },
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "dialogLang.IndicatorMax", key);
        },
        init(){
            if(this.fieldSetting && this.fieldSetting.indicatorMax){
                this.settings=this.fieldSetting.indicatorMax;
            }
        },
        selectChange(e){
            this.selectRows=[];
            for (let i = 0; i < e.records.length; i++) {
                let row=e.records[i];
                this.selectRows.push(row.idx_);
            }
        },
        addRow() {
            this.settings.push({
                label:"",
                max:10000,
                idx_:Util.randomId()
            });
        },
        removeRow() {
            this.removeRows(this.settings, this.selectRows);
        },
        onOk(){
            Util.closeWindow(this, "ok",this.settings);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        },
    }
}
</script>

<style scoped>
.table-operator {
    float: right;
}

.table-operator > i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f5f7fa;
    border: solid 1px #dadde0;
    border-left: none;
    display: block;
    float: left;
}

.table-operator > i:nth-child(1) {
    border-left: solid 1px #dadde0;
    border-radius: 5px 0px 0px 5px;
}

.table-operator > i:nth-child(4) {
    border-radius: 0px 5px 5px 0px;
}

.rendering {
    border-left: 3px solid #1890ff;
    height: 10px;
    line-height: 10px;
    padding-left: 5px;
    width: 100px;
    float: left;
    margin-top: 16px;
}

.aselect {
    width: calc(100% - 120px);
    margin-left: 10px;
}

.effect {
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
}

.rcgrid {
    height: calc(100% - 50px);
}

.be_colour {
    width: 50px;
}

.range {
    height: 100%;
    padding: 20px;

}
</style>
